import { useQuery } from '@tanstack/react-query';
import cn from 'classnames';
import { FC } from 'react';
import { useParams } from 'react-router-dom';

import { useDismiss } from '../../../hooks/useDismiss.ts';
import { AdminService } from '../../../services/admin.service.ts';
import Page from '../../layout/Page';

import { EmployeePageProps } from './EmployeePage.props.ts';

const EmployeePage: FC<EmployeePageProps> = ({}) => {
  const { id } = useParams<{ id: string }>();

  const { data, isLoading } = useQuery({
    queryKey: ['admin', 'employee', 'one', id],
    queryFn: () => AdminService.getOneById(+(id || -1)),
  });

  // Функция для увольнения сотрудника
  const dismiss = useDismiss({
    invalidateQueries: [['admin', 'employee', 'one', id]],
  });

  return (
    <Page>
      {isLoading ? (
        <>Загрузка...</>
      ) : data?.data ? (
        <section>
          <header>
            <img
              src={`https://api.dicebear.com/8.x/identicon/svg?seed=${data?.data.name}`}
              alt={'Аватар'}
              className={cn('aspect-square rounded-lg bg-neutral-100')}
              style={{
                width: 'min(200px, 100%)',
              }}
            />

            <h1 className={cn('font-bold text-[2rem] outline-none')}>
              {data?.data.name} | {data?.data.group}
            </h1>
          </header>

          <article className={cn('mt-[.5rem] mb-[1rem]')}>
            <p>Статус: {data?.data.status}</p>
            <p>Роль: {data?.data.group}</p>
          </article>

          {data.data.group !== 'Администратор' && (
            <button
              className={cn(
                'bg-red-600 text-white rounded-md px-[.5rem] py-[.25rem]',
              )}
              onClick={() => dismiss(+(id || -1))}
            >
              Уволить
            </button>
          )}
        </section>
      ) : (
        'Пользователь не найден!'
      )}
    </Page>
  );
};

export default EmployeePage;
